<template>
  <div>
    <a-modal :bodyStyle="{ padding: '20px' }" title="新增设备" :visible="show" @ok="submit" @cancel="close" :width="460"
      centered>
      <a-form-model :model="queryParams" :rules="rules" :labelCol="{ style: 'width: 78px' }" ref="form" class="ant-advanced-form" >
        <a-form-model-item label="设备品牌" prop="brandId">

          <a-select  style="width:280px" placeholder="请选择品牌" allowClear @change="changeDevice"
            v-model="queryParams.brandId">
            <a-select-option v-for="(item, i) in brandOptions" :key="i" :value="item.id">{{ item.name }}
            </a-select-option>
          </a-select>

        </a-form-model-item>
        <a-form-model-item  label="设备型号" prop="modelId">
          <a-select style="width:280px"  placeholder="请选择型号" allowClear v-model="queryParams.modelId">
            <a-select-option v-for="(item, i) in deviceOptions" :key="i" :value="item.id">{{ item.modelName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="设备编号" prop="deviceNo">
          <a-input v-model="queryParams.deviceNo" style="width:280px" placeholder="请输入设备编号"></a-input>
        </a-form-model-item>
        <a-form-model-item label="SN号" prop="snNo" v-if="+queryParams.brandId===1003">
          <a-input v-model="queryParams.snNo" style="width:280px" placeholder="请输入SN号"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { deviceList, addDeviceDetail } from '@/services/deviceManament'
import { brandAllGet } from '@/services/vehicleStore'
import { deviceNoRules, snNoRules } from '@/utils/validate'
export default {
  data () {
    return {
      show: false,
      brandOptions: [],
      deviceOptions: [],
      queryParams: {},
      rules: {
        brandId: [
          { required: true, message: '请选择设备品牌', trigger: 'blur' }
        ],
        modelId: [
          { required: true, message: '请选择设备型号', trigger: 'blur' }
        ],
        deviceNo: [
          { required: true, message: '请输入设备编码', trigger: 'blur' },
          { validator: deviceNoRules }
        ],
        snNo: [{ required: true, message: '请输入SN号', trigger: 'blur' },
          { validator: snNoRules }]
      }
    }
  },
  methods: {
    onInitial (row) {
      console.log(row)
      // this.params = row
      // this.queryParams = {
      //   memberId: row.id,
      //   phoneOld: row.phone
      // }
      this.brandAllGet()
      this.show = true
    },
    changeDevice (values) {
      if (values) {
        this.getAllDeviceList(values)
      } else {
        this.deviceOptions = []
      }
    },
    async brandAllGet () {
      const res = await brandAllGet({ type: 4 })
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.brandOptions = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getAllDeviceList (brandId) {
      const res = await deviceList({ brandId, status: 1 })
      if (res.isSuccess) {
        this.deviceOptions = res.data
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.toAddDeviceDetail()
        }
      })
    },
    async toAddDeviceDetail () {
      const res = await addDeviceDetail(this.queryParams)
      if (res.isSuccess) {
        this.$message.newFun('新增设备成功', 'success', 2)
        this.close()
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    close () {
      this.show = false
      this.queryParams = {}
      this.$emit('modelClose')
    }
  }
}
</script>

<style>

</style>
